<template>
  <el-card v-if="order">
    <h2>订单详情</h2>
    <el-descriptions :column="1">
      <el-descriptions-item label="订单号">{{ order.id }}</el-descriptions-item>
      <el-descriptions-item label="客户姓名">{{ order.userName }}</el-descriptions-item>
      <el-descriptions-item label="服务类型">{{ order.serviceName }}</el-descriptions-item>
      <el-descriptions-item label="预约时间">{{ order.date }}</el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag>{{ order.status }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="备注">{{ order.remark }}</el-descriptions-item>
    </el-descriptions>
    <el-divider/>
    <div v-if="order.status === '已完成' && !order.reviewed">
      <ReviewForm :orderId="order.id" @review-success="fetchOrder"/>
    </div>
    <div v-else-if="order.reviewed">
      <el-alert title="已评价" type="success"/>
    </div>
  </el-card>
  <el-empty v-else description="未找到订单"/>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getOrderDetail } from '@/api/order'
import ReviewForm from '../service/components/ReviewForm.vue'

const route = useRoute()
const order = ref(null)

async function fetchOrder() {
  const res = await getOrderDetail(route.params.id)
  order.value = res.data
}

onMounted(fetchOrder)
</script> 